<template>
    <div id='hover-copy'>
        <el-popover
        placement="top-start"
        width="300"
        trigger="hover"
        >
        <div class="show">
            <span class="label">{{label}}</span>
            <span @click="copyItem" class="btn">复制</span>
            </div>
        <p>{{item}}</p >
        <span  v-if="canIcli1==false" slot="reference" >{{itemShow}}</span>
        <span  v-else @click='getTxHash(item)' slot="reference" class="is-active">{{itemShow}}</span>
        </el-popover>
        <el-dialog
  :visible.sync="dialogVisible"
  width="30%"
  title="交易结构详情"
  :center="false">
  <ul class='infoUl' style="text-align:left">
    <li><span>交易hash: </span>{{cardData.txHash}}<span @click="copyItem" class="btn">复制</span></li>
    <li><span>时间戳: </span>{{cardData.createTime}}</li>
    <li><span>区块高度: </span>{{cardData.chainHight}}</li>
    <li><span>Nonce: </span>{{cardData.nonce}}</li>
    <li><span>发起账户: </span>{{cardData.from}}</li>
    <li><span>目标账户: </span>{{cardData.to}}</li>
<li><span>交易Gas: </span>{{cardData.gas}}</li>
<li><span>签名：</span><el-popover
    placement="bottom"
    width="200"
    v-model="visible2"
    trigger="manual">
    <div class="show">
            <span class="label">签名</span>
            </div>
    <div class="pop-con">{{cardData.sign}}</div>
    <span slot="reference" @click="visible2 = !visible2">详细</span>
  </el-popover></li>
<li><span>交易收据: </span>
<el-popover
    v-model="visible1"
    placement="bottom"
    width="600"
    trigger="manual">
    <div class="show">
            <span class="label">交易收据</span>
            </div>
    <div class="pop-con">{{cardData.data}}</div>
    <span slot="reference" @click="visible1 = !visible1">详细</span>
  </el-popover></li>
  </ul>
<span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="truePop()">确 定</el-button>
  </span>
</el-dialog>
    </div>
</template>
<script>
export default {
    name:'HoverCopy',
    props:['item','label','itemShow','canIcli'],
    data(){
      return {
        canIcli1:false,
        cardData:{},
        dialogVisible:false,
        visible1:false,
        visible2:false,
      }
    },
    created(){
      if(this.canIcli!=undefined){
        this.canIcli1=true;
      }
    },
    methods: {
        copyItem(){
        const input = document.createElement("input");
        input.style.opacity="0";
          input.setAttribute(
            "value",
            this.item
          ); 
        document.body.appendChild(input);
        input.select();
        if (document.execCommand("copy")) {
          document.execCommand("copy");
          this.$message({
            message: this.label+"复制成功",
            type: "success"
          });
        }else{
            this.$message({
            message: "复制失败，请使用现代浏览器。 eg.chrome",
            type: "error"
          });
        }
        },
        truePop(){
          this.dialogVisible = false;
          this.visible1=false;
          this.visible2=false;
        },
        getTxHash(item){
          this.$http.get('/company/getTxHashInfo',{
            params: {
              txHash: this.item
            }
          }).then(res=>{
            if(res.status==200){
              let {data}=res;
              if(data!=false){
                this.cardData=data;
              }
              this.dialogVisible=true;
            }
          });
        }
    },
}
</script>
<style lang="scss" scoped>
.infoUl{
  text-align: left;
  span{
    font-weight: 900;
  }
}
.pop-con{
  padding: 10px;
}
.is-active {
    color: #549de8;
    cursor: pointer;
  }
  .label{
    float: left;
  }
  .btn{
    float: right;
    color: green;
    cursor: pointer;
  }
  p{
    margin-top: 2px;
    padding:0 20px 10px 20px;
    font-size:12px;
    cursor:default;
  }
  .show{
    border-bottom: 1px solid #e4e4e4;
    height: 20px;
    padding:10px 25px 0 20px;
    cursor:default;
  }
</style>
